<template>
    <div class="body" id="app-home">
        <myNav></myNav>
        <my-menu2 :showButton="showButton"></my-menu2>
        <my-menu v-show="ishowMenu"></my-menu>
        <nuxt />
        <myFooter v-show="ishowMenu2"></myFooter>

        <rightFixed
            :showButton="showButton"
            @goTopSmooth="goTopSmooth"
        ></rightFixed>

        <div v-if="moenyShow" class="big-dialog">
            <img
                style="cursor: auto; width: 330px"
                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/claimRewards3.png"
                alt="领取奖励"
            />
            <div class="smalltext2">
                <div
                    :style="{
                        fontSize: '28px',
                        fontWeight: '500',
                        color: '#F23913',
                        textAlign: 'center',
                        paddingBottom: '27px',
                    }"
                >
                    {{ showLeafType == 1 ? "欢迎回来" : "恭喜您" }}
                </div>
                <div
                    :style="{
                        fontSize: '17px',
                        fontWeight: '400',
                        color: '#333333',
                        textAlign: 'center',
                        paddingBottom: '36px',
                    }"
                >
                    <template v-if="showLeafType == 1">
                        您不在的期间，小竹持续更新！
                    </template>
                    <template v-else>
                        恭喜您成为本月<span style="color: #ff4545"
                            >活跃用户</span
                        >
                    </template>
                </div>

                <div
                    :style="{
                        fontSize: '24px',
                        fontWeight: '500',
                        color: '#FF4545',
                        textAlign: 'center',
                        paddingBottom: '20px',
                    }"
                >
                    {{ showLeafType == 1 ? "赠送您小竹叶" : "奖励您小竹叶" }}
                </div>

                <div
                    class="admincoupon"
                    style="line-height: 1; padding-bottom: 5px"
                >
                    <span>{{ leafNum }}</span
                    >片
                </div>
            </div>
            <div
                class="smalldjck smalldjck2"
                @click.stop="
                    moenyShow = false;
                    go('/user/mybamboo', '');
                "
            >
                确认
            </div>
        </div>
        <div v-show="false">
            <audio
                id="soundAudio"
                ref="music"
                preload="auto"
                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/index-video/sound.MP3"
            ></audio>
        </div>
        <div class="service-dialog-serverHome">
            <el-dialog
                title=""
                :visible.sync="dialogVisible"
                width="330px"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                :show-close="false"
            >
                <div class="service-one">
                    <img
                        src="~/assets/images/service/service_one.png"
                        alt="小竹企服"
                        class="service-one-img"
                    />
                    跨区工商财税找小竹，平台担保更靠谱!
                </div>
                <div slot="footer" class="dialog-footer">
                    <span @click="closeServiceOne">确认</span>
                </div>
            </el-dialog>
        </div>

        <div class="xzcs-ai">
            <img
                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/xzcs_ai.gif"
                alt="小竹财税AI"
                @click="go2('/chatgpt/xzcsgpt', '')"
            />
        </div>
        <no-ssr>
            <payVip :show="payVipShow"></payVip>

            <div v-if="showHuoDongModel" class="sb-showHuoDongModel">
                <div>
                    <img
                        :src="showHuoDongModelData"
                        alt=""
                        @click="clickshowHuoDongModel"
                    />
                    <i
                        class="el-icon-circle-close"
                        @click.stop="showHuoDongModelhide"
                    ></i>
                </div>
            </div>
        </no-ssr>
    </div>
</template>

<script>
import myNav from "@/components/nav/myNav.vue";
import myMenu2 from "@/components/nav/myMenu_new";
// import myMenu from "@/components/service/serviceMenu";
import myMenu from "@/components/service/seaarchHeader";
import myFooter from "@/components/nav/myFooter";
import rightFixed from "@/components/index/rightFixed";

import mixinsUser from "~/mixins/user";
import mixinsIndex from "~/mixins/index";
import payVip from "@/components/nav/payVip";
import { mapState, mapMutations } from "vuex";

export default {
    components: {
        myNav,
        myMenu,
        myFooter,
        rightFixed,
        payVip,
        myMenu2
    },
    mixins: [mixinsUser, mixinsIndex],
    data() {
        return {
            dialogVisible: false,
        };
    },
    mounted() {
        this.setmenuIndex("5");
        // setTimeout(() => {
        //     if (!localStorage.getItem("closeServiceOne")) {
        //         this.dialogVisible = true;
        //     }
        // }, 500);
    },
    computed: {
        ishowMenu: function () {
            let noShow = [
                "service-productrelease",
                "service-servicechat",
                "service-servicecenter-path",
                "service-postdemand",
                "service-servicehelp",
                "service-placeorder",
                "service-serviceintroduce",
                "service-servicedetail",
                "service-serviceshopsdetail",
                "service-demanddetail",
                "service-productrelease",
                "service-shoporder",
                "service-applyservice",
                "service-applypersonservice",
            ];
            if (this.$route && noShow.indexOf(this.$route.name) != -1) {
                return false;
            }
            return true;
        },
        ishowMenu2: function () {
            let noShow = ["service-servicechat"];
            if (this.$route && noShow.indexOf(this.$route.name) != -1) {
                return false;
            }
            return true;
        },
        ...mapState("common", {
            payVipShow: (state) => state.payVipShow,
        }),
    },
    methods: {
        ...mapMutations("common", ["setmenuIndex", "set_payVipShow"]),
        go(path, params) {
            this.$router.push({ path: path, query: params });
        },
        go2(path) {
            window.open(path, "_blank");
        },
        closeServiceOne() {
            localStorage.setItem("closeServiceOne", 1);
            this.dialogVisible = false;
            this.$router.push({
                path: "/service/postdemand",
            });
        },

        clickshowHuoDongModel() {
            this.showHuoDongModelhide();
            // this.set_payVipShow({ show: true, index: 1 });
            this.$router.push({
                path: "/mynews/notice?id=64",
            });
        },
        showHuoDongModelhide() {
            this.showHuoDongModel = false;
            // localStorage.setItem("loginTipShow2", "1");
            const currentTime = Date.now();
            localStorage.setItem('loginlastTime', currentTime.toString())
        },
    },
};
</script>
<style lang="scss">
@import "@/assets/static/commone.scss";
.xzcs-ai {
    position: fixed;
    bottom: 0;
    left: calc(50vw - 600px - 120px);
    z-index: 100;
    img {
        width: 100px;
        height: auto;
        cursor: pointer;
    }
}
em {
    color: #1c87f3 !important;
}

.big-dialog {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    background: rgba($color: #000000, $alpha: 0.4);
    img {
        cursor: pointer;
    }
    .big-close {
        text-align: center;
        position: relative;
        left: -114px;
        top: -90px;
        width: 50px;
        height: 20px;
        border-radius: 15px;
        font-size: 14px;
        color: #fff;
        background-color: #000000;
        opacity: 0.7;
    }
    .el-icon-circle-close {
        position: relative;
        left: -11px;
        top: -206px;
        color: #fff;
        font-size: 34px;
    }
    .smalldjck {
        width: 226px;
        height: 55px;
        line-height: 55px;
        // background: linear-gradient(360deg, #ffd107 0%, #ffe63f 100%);
        background: transparent;
        // border-radius: 35px;
        text-align: center;
        font-size: 23px;
        font-weight: 500;
        // color: #960211;
        position: absolute;
        top: calc(50% + 110px);
        cursor: pointer;
    }
    .smalldjck2 {
        width: 179px;
        height: 50px;
        background: linear-gradient(180deg, #fff249 0%, #ffb917 100%);
        box-shadow: 0px 4px 14px 0px rgba(199, 55, 51, 0.7);
        border-radius: 25px;
        font-size: 24px;
        color: #ff3734;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
    }
    .smalltext {
        position: absolute;
        bottom: calc(50% - 76px);
        .admincoupon {
            text-transform: none;
            background: linear-gradient(90deg, #ff651f 0%, #ff075a 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 700;
            font-size: 31px;
            span {
                font-size: 74px;
            }
        }
        div {
            // background: linear-gradient(180deg, #ff6a44 0%, #fe1000 100%);
            // -webkit-background-clip: text;
            // -webkit-text-fill-color: transparent;
            text-align: center;
        }
    }
    .smalltext2 {
        position: absolute;
        top: calc(50% - 165px);
        .admincoupon {
            text-align: center;
            text-transform: none;
            background: linear-gradient(90deg, #ff651f 0%, #ff075a 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 700;
            font-size: 36px;
            span {
                font-size: 58px;
            }
        }
    }
}

.service-one {
    font-size: 19px;
    color: #333333;
    line-height: 30px;
    padding: 0 15px;
    .service-one-img {
        width: 91px;
        height: auto;
        display: block;
        margin: 0 auto;
    }
}
.dialog-footer {
    margin: 0 20px;
    text-align: center;
    border-top: 1px solid #eeeeee;
    padding-top: 15px;
    span {
        font-size: 19px;
        color: #576b95;
        cursor: pointer;
    }
}
.sb-showHuoDongModel {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    > div {
        position: relative;
        cursor: pointer;
        i {
            color: #333333;
            font-size: 34px;
            position: absolute;
            bottom: -56px;
            right: 178px;
        }
    }
    img {
        width: 387px;
        height: auto;
    }
}
</style>
<style >
.service-dialog-serverHome .el-dialog__header {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}
</style>
<style>
* {
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei", "SimHei", sans-serif;
}
audio,
button,
camera,
canvas,
checkbox,
div,
form,
icon,
image,
input,
label,
live-player,
live-pusher,
map,
navigator,
picker,
picker-view,
progress,
radio,
scroll-view,
slider,
swiper,
switch,
text,
video,
view,
web-view {
    box-sizing: border-box;
}
.body {
    background-color: #f0f0f2;
}

.service-notify {
    animation-name: service-notify-animation;
    animation-duration: 0.6s;
    animation-iteration-count: 2;
    z-index: 10000000 !important;
}

.fYcoZV {
    z-index: 999;
}

@keyframes service-notify-animation {
    0% {
        background-color: #1c87f3;
        transform: rotate(1deg);
    }
    50% {
        background-color: #ffffff;
        transform: rotate(-1deg);
    }
    100% {
        background-color: #1c87f3;
        transform: rotate(1deg);
    }
}

.el-pagination.is-background .el-pager li {
    background-color: #ffffff !important;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #1c87f3 !important;
}

.vue-puzzle-vcode {
    z-index: 9999 !important;
}

.el-message {
    z-index: 10000 !important;
}

/* @font-face {
  font-family: "ZTGB2312";
  src: url("~/assets/images/images/GB2312.TTF") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Helvetica";
  src: url("~/assets/images/images/GB2312.TTF") format("truetype");
  font-weight: 400;
} */

a {
    text-decoration: none;
    color: #333333;
}

em {
    color: #fa3534;
    font-style: normal;
}

.ksyifn {
    bottom: 65px !important;
    right: 15px;
}

.big-top-el-message {
    top: 136px !important;
}

.vip-message-box {
    width: 300px;
}

.vip-message-box .el-button {
    width: 100%;
}

.vip-message-box .el-message-box__title {
    text-align: center;
}
.dialog-right {
    margin-left: calc(50vw + 204px);
}
.el-button--warning {
    color: #fff;
    background-color: #ff6900;
    border-color: #ff6900;
}
.el-button--warning:focus,
.el-button--warning:hover {
    background: #ff8733;
    border-color: #ff8733;
    color: #fff;
}

.el-breadcrumb__inner {
    line-height: 1.5;
}
</style>